<script >
import * as echarts from 'echarts';
export default {
  data() {
    return {
      form: {},
    }
  },
  methods: {

    fetchData() {
      // 发送请求获取数据
      this.axios.get('http://localhost:8202/person/findCount')
          .then(response => {
            // 将获取到的数据存储在一个变量中，以便在图表和表格中使用
            this.dataForChartAndTable = response.data;
            // 初始化图表
            this.initBie();
            // 更新表格数据
            this.updateTableData();
          })
          .catch(error => {
            console.error('获取数据错误：', error);
          });
    },
    updateTableData() {
      // 根据获取到的数据更新表格内容
      const tableData = [];
      let totalCount = 0;
      this.dataForChartAndTable.forEach(item => {
        totalCount += item.value;
      });
      this.dataForChartAndTable.forEach((item, index) => {
        tableData.push({
          id: index + 1,
          gender: item.name,
          count: item.value,
          percentage: ((item.value / totalCount) * 100).toFixed(2) + '%'
        });
      });
      this.tableData = tableData;
    },

    initBie(){
      let chartDom = document.getElementById('bie');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '居民学历构成'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '居民学历统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.dataForChartAndTable,
          }
        ]
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.fetchData();
  }
}
</script>

<template>
  <div style="width: 100%; height: 100%;">
    <h2 style=" text-align: left; padding-bottom: 50px;" >居民学历统计</h2>
    <div>
      <div style="width: 100%; height: 30%;">
        <el-form :inline="true" :model="form" >
          <el-form-item label="选择签约日期开始时间和结束时间">
            <el-date-picker
              v-model="form.dateStart"
              type="date"
              placeholder="开始日期"
              style="width: 150px;"
            ></el-date-picker>
            <span>至</span>
            <el-date-picker
              v-model="form.dateEnd"
              type="date"
              placeholder="结束日期"
              style="width: 150px;"
              ></el-date-picker>
          </el-form-item>
          <br>
          <el-form-item label="机构">
            <el-select v-model="form.region" placeholder="机构">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="医生团队">
            <el-select v-model="form.region" placeholder="医生团队">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="医生">
            <el-select v-model="form.region" placeholder="医生">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" @click="findPage()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div id="bie" class="centered-shadow-div">

      </div>
      <div>
        <table>
          <thead>
          <tr>
            <th>序号</th>
            <th>性别</th>
            <th>人次</th>
            <th>比例</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>1</td>
            <td>男</td>
            <td>600</td>
            <td>65.2%</td>
          </tr>
          <tr>
            <td>2</td>
            <td>女</td>
            <td>240</td>
            <td>28.2%</td>
          </tr>
          <tr>
            <td>3</td>
            <td>未知</td>
            <td>80</td>
            <td>8.6%</td>
          </tr>
          <tr>
            <td colspan="2">合计</td>
            <td>920</td>
            <td>100%</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</template>

<style >
.aa{
  width: 100%;
  height: 100%;
  margin: auto;
  //background-color: #d37070;
}

.centered-shadow-div {
  position: relative;
  width: 70%;
  height: 500px; /* 设置高度，可以根据实际情况调整 */
  box-shadow: 0 0 10px #9f9fca; /* 设置阴影 */
  margin: auto; /* 水平居中 */
  padding: 20px;
  top: 50%; /* 将元素的顶部位置设置为父元素高度的 50% */



  //background-color: #f5f5f5;
  //padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;


}



table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>